<template>
	<div ref="sTopNav" class="itemGroup-slideTopNav navBarWrap" id="sTopNav">
        <div class="topNavBox" :style="styleObj">
            <div class="hiddenBox">
                <ul class="nav-box" :style="styleObj2">
                    <li :class="['nav-item',...itemClassName]" v-for="(item, index) in navList" :key="index" :style="[styleObj1]" @click="itemGroup(item.groupId)">
                        <p :style="{color:item.titleColor,background:item.titleBackgroundColor}">{{item.showtitle}}</p>
                    </li>
                </ul>
            </div>
        </div>
  </div>
</template>

<script>
  /**
   * @Author: yqe@360shop.cn
   * @Date: 2020年07月08日15:11:21
   * @Last Modified by: yqe@360shop.cn
   * @Last Modified time: 2020年07月08日15:11:21
   */
  import Vue from 'vue'
  export default Vue.extend({
    name: 'index',
    data() {
      return {
        navList: [],
        styleObj: {},
        styleObj1: {},
        styleObj2: {},
        itemClassName: []
      }
    },
    props: {
      tplItemData: {
        type: Object // 传入参数的类型
      }
    },
    mounted() {
    //   window.addEventListener('scroll', this.watchScroll)
    //   this.scrollTop = this.$refs.sTopNav.offsetTop
      this.navList = this.tplItemData.dataset
      this.styleObj.padding = this.tplItemData.modulePadding + 'px 0px'
      this.styleObj.overflow = 'hidden'
      this.styleObj1.fontSize = this.tplItemData.fontSize + 'px'
      this.styleObj1.color = this.tplItemData.titleColor
      this.styleObj2.backgroundColor = this.tplItemData.moduleBackgroundColor
      if (this.tplItemData.dataset.length === 1) {
        this.itemClassName.push('col1')
      } else if (this.tplItemData.dataset.length === 2) {
        this.itemClassName.push('col2')
      } else if (this.tplItemData.dataset.length === 3) {
        this.itemClassName.push('col3')
      } else if (this.tplItemData.dataset.length === 4) {
        this.itemClassName.push('col4')
      } else {
        // console.log('大于4')
        this.itemClassName.push('col4')
      }
    },
    methods: {
      itemGroup(groupId) {
        this.$emit('child-itemGroup', groupId)
      }
    }
  })
</script>

<style lang='scss'>
.itemGroup-slideTopNav{
    background: #FFF;
    width: 100%;
    &.navBarWrap {
        position:fixed;
        top:0;
        left: 0;
        z-index:99;
    }
    .topNavBox{
        box-sizing: border-box;
        overflow: hidden;
        width: 100%;
        overflow-y: auto;
        .hiddenBox{
        overflow: hidden;
        .nav-box::-webkit-scrollbar {
            display: none;
            }
        .nav-box{
            display: flex;
            padding: 20px 0 10px;
            background: rgb(255, 255, 255);
            overflow-x: scroll;
            scrollbar-width: none; /* firefox */
            -ms-overflow-style: none; /* IE 10+ */
            li{
                width: 140px;
                text-align: center;
                flex-shrink: 0;
                white-space: nowrap;
                margin-right: 10px;
                p{
                    display: block;
                    width: 100%;
                    text-align: center;
                    margin-right: 10px;
                    margin-bottom: 6px;
                    padding: 2px 22px;
                    box-sizing: border-box;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                }
            }
            .col1{
                width: 90vw;
            }
            .col2{
                width: 49vw;
            }
            .col3{
                width: 33vw;
            }
            .col4{
                width: 24vw;
            }
            .col5{
                width: 22vw;
            }
            }
        }
    }
}
</style>
